<template>
	<view class="Receipt">
		<view class="container">
			<view class="h3">{{ entity.CompanyName }}</view>
			<view class="cell"><text>单号:</text>{{ entity.SalesOrder }}</view>
			<view class="cell">
				<text>日期:</text>{{ entity.CreateTime?entity.CreateTime.substring(0, 19):'' }}
			</view>
			<view class="cell"><text>客户:</text>{{ entity.cCusName||'散客' }}</view>
			<view class="cell"><text>客户地址:</text>{{ entity.cCusAddress||'' }}</view>
			<view class="cell"><text>客户电话:</text>{{ entity.cCusPhone||'' }}</view>
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="cell"><text>业务员:</text>{{ entity.RealName||'' }}</view>
			</view>
			<view class="tableRow" style="border-bottom: 1px dashed #ccc; margin-top: 10px; line-height: 2">
				<text class="tableIndex"></text>
				<text class="tableCol left">品名/编码</text>
				<text class="tableCol">数量</text>
				<text class="tableCol">单价</text>
				<text class="tableCol">金额</text>
			</view>
			<view style="padding: 10px 0">
				<view v-for="(item, index) in data" :key="index">
					<view class="tableRow">
						<text class="tableIndex">{{ index + 1 }}</text>
						<text class="tableCol left">{{ item.InventName }}</text>
						<text class="tableCol">{{ item.Quantity }}</text>
						<!-- <text class="tableCol">{{ item.GroupName }}</text> -->
						<text class="tableCol">{{ momenyFormat(item.Price) }}</text>
						<text class="tableCol">{{ momenyFormat(item.Money) }}</text>
					</view>
					<view class="tableRow">
						<text class="tableIndex"></text>
						<text class="tableCol left">{{ item.cInvCode||'' }}</text>
						<text class="tableCol">{{ item.GroupName||'' }}</text>
						<text class="tableCol col2">规格: {{ item.cInvStd||'' }}</text>
						<!-- <text class="tableCol">{{ item.GroupName }}</text> -->
					</view>
				</view>
			</view>

			<view class="tableRow" style="border-top: 1px dashed #ccc; line-height: 2; margin-bottom: 10px">
				<text class="tableIndex"></text>
				<text class="tableCol left">合计</text>
				<text class="tableCol">{{ entity.TotalQuantity }}</text>
				<text class="tableCol"></text>
				<text class="tableCol" style="">{{ momenyFormat(entity.TotalSum) }}</text>
			</view>
			<view class="cell">
				<text>{{entity.PaymentType||''}}:</text>
				{{entity.Type == 0?momenyFormat(entity.ReceiveSum):momenyFormat(entity.PendingSum)}}
			</view>
			<view v-if="xpqrcode" style="text-align: center; padding-top: 50px;padding-bottom: 60px;">
				<text>{{this.ReceiptPhrase}}</text>
				<tki-qrcode style="margin-top: 40rpx;" ref="qrcode" :val="xpqrcode" :size="300" unit="upx" />
				<text>扫码查看电子小票</text>
				<view class="txt">{{entity.Address}}</view>
				<view class="txt">签收+提供技术支持</view>
			</view>
		</view>
		<view v-if="Sign" style="background-color: #fff;padding: 20rpx;box-sizing: border-box;font-weight: bold;">
			客户签字
		</view>
		<view v-if="Sign" class="imgBox">
			<img class="img" :src="Sign" alt="客户签名">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Id: "",
				entity: {},
				data: [],
				Sign: '',
				type: '',
				xpqrcode: '',
			}
		},
		onLoad(options) {
			this.Id = options.Id
			this.xpqrcode = 'https://psq.yoojet.com/#/App/Receipt?Id=' + this.Id
			setTimeout(() => {
				console.log(this.$refs.qrcode);
				this.$refs.qrcode._makeCode()
			}, 500)
			this.getTheData(this.Id)
		},
		methods: {
			// 获取小票列表数据和单号相关信息
			getTheData(Id) {
				this.$http('post', "/BO/BIlling/GetBllingDetail?Id=" + Id).then((res) => {
					console.log(res);
					if (res.Success) {
						this.data = res.Data.detalist;
						this.entity = res.Data.maindata;
					} else this.$message.error(res.Msg);
				});
			},
			momenyFormat(num) {
				num = Number(num)
				if (isNaN(num)) return '0.00'
				return num.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		position: absolute;
		right: 10px;
		top: 10px;
		border: 1px solid red;
		height: 50px;
		width: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 50%;
		color: red;
		transform: rotate(-20deg);
	}

	.edit_view {
		overflow: hidden;
	}

	.btn_view {
		overflow: hidden;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 60px;
		border-top: 1px solid #ccc;
		background: #fff;
		z-index: 9999;
	}

	.btn_edit {
		float: right;
		margin-top: 7px;
		margin-left: 8px;
		margin-right: 8px;
		width: 100px;
	}

	.btn_submit {
		float: right;
		width: 100px;
		margin-top: 7px;
		background-color: #438FE8;
	}

	.btn_add {
		margin-bottom: 4px;
		height: 30px;
		font-size: 16px;
		line-height: 30px;
	}

	.Receipt {
		.imgBox {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 180px;
			overflow: hidden;
			width: 100%;
			background-color: #fff;

			.img {
				transform: rotate(-90deg);
				width: 160px;
				background-color: #fff;
			}
		}

		.txt {
			margin-top: 10px;
		}

		.container {
			margin: 0 auto;
			color: #000;
			padding: 10px 40rpx;

			.h3 {
				text-align: center;
				font-weight: bold;
			}

			.cell {
				display: flex;
				line-height: 2;

				span {
					width: 40px;
				}
			}

			.tableRow {
				font-size: 12px;
				display: flex;
				align-items: center;

				span {
					overflow: hidden;
				}

				.tableCol {
					// flex: 1;
					width: 75px;
					text-align: right;
					overflow: hidden;
				}

				.tableInp {
					font-size: 12px;
					width: 75px;
					text-align: right;
					overflow: hidden;
					border: 1px solid #ccc;
					padding: 4px;
					border-radius: 4px;
				}

				.left {
					text-align: left;
					flex: 1;
				}

				.tableIndex {
					width: 25px;
				}

				.col2 {
					width: 150px;
				}
			}
		}
	}
</style>